<template>
  <div class="tip-com">
    <div class="tip-title">
      <h1>{{subNav.title}}</h1>
      <h2>{{subNav.enTitle}}</h2>
    </div>
    <ul>
      <li @click.stop="change(item)" :key="index" v-for="(item,index) in subNav.children">
          <span
            class="iconfont icon-jiantou1-copy item-span"
            :class="{'active':item.active}">
            {{item.title}}
          </span>
        <div class="subItems" v-if="item.active && !isNullOrEmpty(item.children)">
          <div @click.stop="change(subItem)"
               class="item-wrapper"
               v-for="subItem in item.children"
               :class="{'item-active': subItem.active}"
          >
            <span>{{subItem.title}}</span>
          </div>
        </div>

      </li>
    </ul>
  </div>
</template>

<script>

  export default {
    props: ['subNav'],
    computed: {},
    data() {
      return {
      }
    },
    components: {},
    mounted() {

    },
    methods: {
      change(item) {
        this.$router.push({path: item.link})
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "~assets/style/public";

  .tip-com {
    background-color: #fff;
    .tip-title {
      background: @icon-color;
      text-align: center;
      color: #FFFFFF;
      .padding(17, 0, 17, 0);
      h1,h2{
        .font-size(18);
      }
      h1 {
        font-family: MicrosoftYaHeiUI-Bold;
      }
      h2 {
        opacity: 0.5;
        font-family: MicrosoftYaHeiUI;
        .padding(5, 0, 0, 0);
      }
    }
    ul {
      background: #FFFFFF;
      border: 1px solid #D8D8D8;
      .padding(0,2,0,2);
      li {
        //.height(50);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-bottom: 1px solid #DADADA;
        cursor: pointer;
        position: relative;
        padding: 8px 0;
        .item-span{
          width: 96%;
          .height(36);
          .line-height(36);
        }
        &:last-child{
          border: none;
        }
        p {
          display: block;
          justify-content: center;
          align-items: center;
          position: relative;
          width: 90%;
        }
        .iconfont{
          &:before {
            position: absolute;
            z-index: 10;
            right: 10/@size;
          }
        }
        .subItems{
          display: flex;
          flex-direction: column;
          margin-top: 8px;
          border-top: 1px solid #DADADA;
          width: 100%;
          .item-wrapper{
            margin: 0 30px;
            box-sizing: content-box;
            display: flex;
            align-items: center;
            justify-content: center;
            .height(40);
            border-bottom: 1px solid #D8D8D8;
            font-size: 14px;
            &:last-child{
              border: none;
            }
            &.item-active{
              color: @theme-color;
              border-bottom-color: @theme-color;
            }
          }
        }
      }
      @keyframes show {
        0% {
          transform: translateY(-10px);
          opacity: 0;
        }

        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .active {
        background: @icon-color;
        .color(#fff);
        animation: show 0.5s;
      }

    }
  }

</style>
